<template>
	<view class="content">
		<view class="list-item" v-for="(item,index) in userArray" :key="index" @tap="goDetail(index)">
			<image class="item-img" :src="item.backImage"></image>
			<view class="right-data margin-left-xs">
				<view class="item-title">{{item.name}}</view>
				<view class="item-describe"> {{item.sucai_miaosu}}</view>
			</view>
			<view class="perch"></view>
			<view class="detail-btn">详情</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userArray : []
			};
		},
		async onLoad(e) {
			let userInfo = this.$store.state.user;
			let data = await this.$httpWay.post('queryMaterialHesdoyByUserId',{"userId":userInfo.id,"status":2});
			//  data['[]']   等价于  data.[]   // [] 是特殊字符报错必须用这种形式。
			console.log(userInfo,data);
			this.userArray = data ;
		},
		methods:{
			goDetail(index){
				uni.navigateTo({
					url: `../detail/detail?id=${this.userArray[index].id}`
				})
			},
		}
	}
</script>

<style lang="scss">
.list-item{
	position: relative;
	display: flex;
	padding: 20upx;
	border-bottom: 1px solid #F1F1F1;
	.item-img{
		width: 300upx;
		height: 170upx;
		border-radius: 10upx;
	}
	.perch{
		width: 15%;
	}
	.detail-btn{
		position: absolute;
		right: 0;
		top: 2%;
		width: 15%;
		height: 96%;
		border-radius: 8upx;
		background-color: #FFFFFF;
		border:1px solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.right-data{
		width: 80%;
		.item-title{
			width: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			text-align: justify;
			overflow: hidden;
			font-size: 25upx;
			margin-bottom: 15upx;
		}
		.item-describe{
			width: 100%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			text-align: justify;
			overflow: hidden;
			font-size: 20upx;
			color: #b1b1b1;
		}
	}
	
}
</style>
